! function() {
    var times = 50;

    function writeCode(prefix, code, fn) {
        // 代码
        let container = document.querySelector("#code")
            // 样式
        let styleTag = document.querySelector("#styleTag")
        let n = 0;
        setTimeout(function run() {
            n += 1;
            container.innerHTML = code.substring(0, n)
            styleTag.innerHTML = code.substring(0, n)
            container.scrollTop = container.scrollHeight
            if (n < code.length) {
                setTimeout(run, times)
            } else {
                fn && fn.call()
            }
        }, times)
    }
    let code = `
    /*
    * 
    * 首先，准备皮卡丘的皮
    *
    */

    .page {
        height: 100%;
        border: 1px solid black;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fee433;
    }
    .box {
        width: 100%;
        height: 165px;
        position: relative;
    }
    /* 开始画它的鼻子 */
    .nose {
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 12px;
        border-color: black transparent transparent;
        border-radius: 11px;
        position: absolute;
        top: 26px;
        left: 50%;
        margin-left: -11px;
    }
    /* 加上迷人的大眼睛 */
    .eye {
        width: 49px;
        height: 49px;
        background: #000;
        position: absolute;
        border-radius: 50%;
        border: 2px solid black
    }

    .eye::before {
        content: '';
        display: block;
        width: 24px;
        height: 24px;
        background: white;
        position: absolute;
        border-radius: 50%;
        left: 6px;
        top: 0px;
        border: 2px solid white;
    }
    
    .eye.left {
        right: 50%;
        margin-right: 90px;
    }
    
    .eye.right {
        left: 50%;
        margin-left: 90px;
    }
    /* 红彤彤的脸颊，有点可爱 */
    .cheek {
        width: 68px;
        height: 68px;
        background: #fc0d1c;
        border-radius: 50%;
        border: 2px solid black;
        position: absolute;
    }
    .cheek.left {
        right: 50%;
        top: 85px;
        margin-right: 116px;
    }
    
    .cheek.right {
        left: 50%;
        top: 85px;
        margin-left: 116px;
    }
    
    /* 好的，最后，我们画皮卡丘的嘴巴*/
    .upperLip {
        width: 80px;
        height: 20px;
        border: 2px solid black;
        position: absolute;
        background: #fee433;
    }
    
    .upperLip.left {
        border-bottom-left-radius: 40px 20px;
        border-top: none;
        border-right: none;
        transform: rotate(-18deg);
        top: 50px;
        right: 50%;
        margin-left: -40px;
    }
    
    .upperLip.right {
        border-bottom-right-radius: 40px 20px;
        border-top: none;
        border-left: none;
        transform: rotate(18deg);
        top: 50px;
        left: 50%;
        margin-right: -40px;
    }
    
    .tongue-box {
        bottom: 0;
        position: absolute;
        left: 50%;
        margin-left: -150px;
        height: 110px;
        width: 300px;
        overflow: hidden;
    }
    
    .tongue {
        width: 300px;
        height: 3500px;
        background: #990513;
        border-radius: 200px/2000px;
        border: 2px solid black;
        position: absolute;
        bottom: 0;
        overflow: hidden;
    }
    .tongue::before {
        content: '';
        position: absolute;
        bottom: -20px;
        width: 100px;
        height: 100px;
        background: #fc4a62;
        left: 50%;
        margin-left: -50px;
        border-radius: 50%;
    }
    /*
    *
    * 画完了，这只皮卡丘送给你
    *
    */
    `
    writeCode('', code)

    // ============ 按钮 ============ 
    var slow = document.querySelector('.slow')
    var middle = document.querySelector(".middle")
    var fast = document.querySelector(".fast")
    slow.onclick = function() {
        times = 100;
    }
    middle.onclick = function() {
        times = 50;
    }
    fast.onclick = function() {
        times = 10;
    }

}.call()